<template>
	<div class="block bg-white" style="width:72%;margin:0 auto;">
			<el-col>
				<div class="grid-content bg-white">
					<el-row>
					<div class="d-flex ai-center">
						<h1 style="margin-left: 0.5rem;">成果列表</h1>

							<el-autocomplete style="width: 10rem;margin-left: auto;margin-right: 0.3rem;"
							v-model="keyword" size="mini"
							:trigger-on-focus="false" clearable
							@clear="afterClear" @keyup.enter.native="handleSelect(keyword)"
							:fetch-suggestions="querySearchAsync"
							placeholder="请输入搜索内容"
							@select="handleSelect(keyword)"
							></el-autocomplete>


					</div>
					</el-row>
					
					<el-row v-for="(item,index) in items.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="index">
						<el-card v-if="item.check=='通过'" :body-style="{ padding: '0.346rem' }">
							<el-col :span="5">
								<img :src="item.cover" class="image" alt="封面" />
							</el-col>
							<el-col :span="19">
								<el-header height="auto">
									<span style="white-space: normal;" class="fs-xl">{{item.name}}</span>
									<span style="color: #999;float: right;margin-right: 0.5rem;"
									v-for="item in item.categories" :key="item">{{item}} </span>
									<br>
									<span>所属赛事：{{item.contest}}</span>
								</el-header>
								<el-main width="auto">
									<span>成果介绍</span>
								</el-main>
								<el-footer height="0" class="ai-center">
									<time class="el-icon-watch"
										style="margin-right: 0.72rem;">获奖时间：{{item.award_date}}</time>
									<el-button type="text" class="button" @click="show(item._id)">查看内容
									</el-button>
								</el-footer>
							</el-col>
						</el-card>
					</el-row>
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page.sync="currentPage"
							:page-size=pagesize
							layout="total, prev, pager, next, jumper"
							:total="items.length">
						</el-pagination>

				</div>
			</el-col>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: [],
				search: [],
				keyword: '', //搜索关键词
				items: [],
				achievement:[],
				currentPage:1,
				pagesize:2,//每页多少数据
				types: ["", "success", "info", "warning", "danger"],//搜索历史tag式样
			}
		},
		methods: {
			show(id) {
				this.$router.push(`/achievement/${id}`)
			},
			async fetch() {
				const res = await this.$http.get(`rest/achievement`)
				this.achievement = res.data
				for(var i=0;i < this.items.length;i++){
					this.achievement[i].award_date = this.dateToString(this.achievement[i].award_date)
				}
				this.items = this.achievement
			},
			overflowHidForText(val, max) {
				let textLength = val.length;
				let resultText = '';
				if (textLength > max) {
					resultText = val.slice(0, max) + '...'
				} else {
					resultText = val
				}
				return resultText
			},
			dateToString(date){
				const d = new Date(date)
				const year = d.getFullYear()
				const month = d.getMonth()+1
				const day = d.getDate()
				return year+'-'+month+'-'+day
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {//当前页改变
				this.currentPage = val
				console.log(`当前页: ${val}`);
			},

			// 当queryString不为空的时候，就说明用户输入内容了，我们把用户输入的内容在数据库中做对比，如果有能够模糊关联的，就直接取出
			// 并返回给带搜索建议的输入框，输入框就把返回的数据以下拉框的形式呈现出来，供用户选择。
			async querySearchAsync(queryString, cb) {
					setTimeout(() => {
					let callBackArr = []; // 准备一个空数组，此数组是最终返给输入框的数组
					// items是从后台获取的数据
					this.items.forEach((item) => {
						// 把数据库做遍历，拿用户输入的这个字，和数据库中的每一项做对比
						// if (item.name.indexOf(queryString) == 0) { // 等于0 以什么什么开头
						if (item.name.indexOf(queryString) > -1) { // 大于-1，只要包含就行，不再乎位置
						// 如果有具有关联性的数据
						callBackArr.push(item); // 就存到callBackArr里面准备返回呈现
						}
					});
					// 经过这么一波查询操作以后，如果这个数组还为空，说明没有查询到具有关联的数据，就直接返回给用户暂无数据
					if (callBackArr.length == 0) {
						cb([{ name: "暂无数据" , value: "暂无数据" }]);
					}
					// 如果经过这一波查询操作以后，找到数据了，就把装有关联数据的数组callBackArr呈现给用户
					else {
						this.searchValue = callBackArr
						cb(this.search = callBackArr.map(item => {
							return {
							name:item._id,
							value:item.name,
							};
						}));
						console.log(this.searchValue)
					}
					}, 1000);
				
			},
			afterClear(){
				this.items = this.achievement
			},
			handleSelect(data) {
				console.log(data)
				if(data=='')
					this.items = this.achievement
				else
					this.items = this.searchValue
			}
		},
		created() {
			this.fetch()
		},
		//生成从minNum到maxNum的随机数
		randomNum(minNum,maxNum){ 
			switch(arguments.length){ 
				case 1: 
					return parseInt(Math.random()*minNum+1,10)
				case 2: 
					return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10)
				default: 
					return 0
			} 
		},
	}
</script>

<style>
	div.test:hover {
		overflow: visible;
	}

	span {
		font-size: 13px;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 100%;
		height: 100%;
		max-width: 8rem;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
